<template>
	<view>
		<view class="u-page">
			<view class="bg">
				<view class="info">
					<view class="u-flex">
						<u-image :src="info.headimg" width="100" height="100" shape="circle"></u-image>
						<view class="u-margin-left-20">
							<view class="" v-if="info.headimg">
								<view style="color: #FFFFFF;font-size: 34rpx;">{{info.nickname}}</view>
								<view style="font-size: 24rpx;  margin-top: 10rpx;color: #FFFFFF;background: #19BE6B;padding: 7rpx 15rpx;border-radius: 20rpx;">
								    <u-icon name="level" color="#fff" size="24"></u-icon>	节能新秀
								</view>
							</view>
							<view v-else style="font-size: 34rpx;color: #fff;">
								<navigator url="../register/index" hover-class="none">
									点击登陆
								</navigator>
							</view>
						</view>
					</view>
					<view class="add">
						<navigator url="../account/index">
							
							立即充值
						</navigator>
						
						</view>
				</view>



				<view
					style="display: flex;justify-content: space-around;color: #FFFFFF;margin-top: 60rpx;text-align: center;">
					<view>
						<navigator url="../account/index" hover-class="none">
							<view style="font-size: 40rpx;">{{info.balance}}</view>
							<view class="">
								账户余额
							</view>
						</navigator>
					</view>
					
					<view>
						<view style="font-size: 40rpx;">{{info.integral}}</view>
						<view class="">
							积分
						</view>
					</view>
					
					<view @click="gocoupond">
							<view style="font-size: 40rpx;">{{info.couponNum}}</view>
							<view class="">
								优惠券
							</view>
					</view>
				</view>

			</view>

			<!--  -->
			<view class="mode">
				<view style="font-size: 32rpx;font-weight: bold;">常用功能</view>
				<u-grid :col="3" :border="false">
					<u-grid-item v-for="(item,index) in bookList" :key="index" index="item" @click="clickGrid2(item)">
						<u-badge :count="item.count" :offset="[20, 20]" bgColor="#FF7E01"></u-badge>
						<u-image :src="item.img" :width="item.width" :height="item.height"></u-image>
						<view class="grid-text u-margin-top-20">{{item.txt}}</view>
					</u-grid-item>
				</u-grid>
				<u-grid :col="3" :border="false">
					<u-grid-item v-for="(item,index) in bookLists" :key="index" index="item" @click="clickGrid2(item)">
						<u-badge :count="item.count" :offset="[20, 20]" bgColor="#FF7E01"></u-badge>
						<u-image :src="item.img" :width="item.width" :height="item.height"></u-image>
						<view class="grid-text u-margin-top-20">{{item.txt}}</view>
					</u-grid-item>
				</u-grid>
			</view>
			
			
			<view class="mode">
				<view style="font-size: 32rpx;font-weight: bold;">其他功能</view>
				<u-grid :col="3" :border="false">
					<u-grid-item v-for="(item,index) in elseList" :key="index" index="item" @click="clickGrid2(item)">
						<view class="custom-btn" style="text-align: center;margin: auto;" >
							<u-icon :name="$ftpUrl(item.cover)" size="60" :color="item.color" v-if="item.cover"></u-icon>
							<u-icon :name="item.img" size="60" :color="item.color" v-if="item.img"></u-icon>
							<view class="grid-text u-margin-top-20">{{item.txt}}</view>
							<button open-type="contact" v-if="index==1"></button>
						</view>
					</u-grid-item>
				</u-grid>
			</view>


		</view>
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<u-tabbar @change="select" :list="tabbar" :mid-button="true" height="100rpx" active-color="#0263C2" ></u-tabbar>
	</view>
</template>

<script>
	import url from '@/common/baseUrl.js';
	import scan from '@/common/scan.js';
	export default {
		data() {
			return {
				tabbar: [],
				imagesurl: url.imageUrl,
				info: {
					
				},
				bookList: [{
					count: 0,
					img: "/static/book.png",
					txt: "洗车订单",
					url: "../../pages/book/index",
					width: '38rpx',
					height: "44rpx"
				}, {
					count: "",
					img: "/static/xiaofei.png",
					txt: "充值记录",
					url: "../../pages/payDetail/index",
					width: '49rpx',
					height: "41rpx"
				}, {
					count: "",
					img: "/static/bangdingcar.png",
					txt: "我的车牌",
					url: "../../pages/bindCar/list",
					width: '46rpx',
					height: "38rpx"
				}],
				
				
				bookLists:[ {
					count: "",
					img: "/static/my_kajuan.png",
					txt: "我的卡券",
					url: "../../pages/my/vip",
					width: '46rpx',
					height: "38rpx"
				},{
					count: "",
					img: "/static/my_vip.png",
					txt: "会员等级",
					url: "../../pages/vip/index",
					width: '46rpx',
					height: "38rpx"
				},{
					count: "",
					img: "/static/my_fenxiao.png",
					txt: "分销中心",
					url: "../../pages/fenxiao/index",
					width: '46rpx',
					height: "38rpx"
				}],
				
				
				elseList: [{
					img: "rmb-circle-fill",
					txt: "申请开店",
					url: "../apply/index",
					color: "#4EC9D2",
					isShow: true,
				}, {

					img: "server-man",
					txt: "客服中心",
					color: "#117AE0",
					isShow: true,
				}, {

					img: "question-circle-fill",
					txt: "帮助中心",
					url: "../help/index",
					color: "#19BE6B",
					isShow: true,
				}, {

					img: "home-fill",
					txt: "我的店铺",
					url: "../myStore/my",
					color: "#4c89be",
					isShow: false,
				},
				{
				
					img: "bag-fill",
					txt: "商品订单",
					url: "../book/goodsBook",
					color: "#FF6464",
					isShow: true,
				},
				{
				
					img: "integral-fill",
					txt: "积分订单",
					url: "../book/jifenBook",
					color: "#1C97FF",
					isShow: true,
				},{
				
					img: "car-fill",
					txt: "收货地址",
					url: "../address/index",
					color: "#ffa82f",
					isShow: true,
				},{
				
					cover: "/app/images/checkYear.png",
					txt: "年审年检",
					url: "../checkYear/list",
					color: "#ffa82f",
					isShow: true,
				}]
				
				
			}
		},
		onLoad() {
			this.tabbar = this.$store.state.tabbar
			
			
			
		},
		onShow() {
			this.userInfo()
		},
		methods: {
			select(e){
				if(e==2){
					scan.scan()
				}
			},
			
		
			
			gocoupond(){
				uni.switchTab({
					url:'/pages/myCoupon/index'
				})
			},
			clickGrid2(item) {
				uni.navigateTo({
					url: item.url
				})
			},
			cell(item){
				uni.navigateTo({
					url: item
				})
			},
			userInfo() {
				return new Promise((resolve, reject) => {
					this.$u.api.userInfo().then(res => {
							this.elseList[3].isShow = res.comId ? true : false;
						this.info = res;
						resolve(res)
					
					}).catch(err => {
			
					})
				})
			
			}
		}
	}
</script>

<style>
	.bg {
		width: 750rpx;
		height: 350rpx;
		background: linear-gradient(-5deg, #0064C6, #2190FB);
	}

	.info {
		padding: 30rpx;
		position: relative;
	}

	.add {
		position: absolute;
		width: 170rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		color: #2C1702;
		right: 30rpx;
		top: 40rpx;
		background: #FDF3CF;
		border-radius: 60rpx;
	}

	.mode {
		width: 698rpx;

		background: #FFFFFF;
		box-shadow: 0px 0px 8rpx 1rpx rgba(191, 191, 191, 0.29);
		border-radius: 20rpx;
		padding: 30rpx;
		margin: 30rpx auto;
	}
</style>
